<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        html, body {
            padding: 0;
            margin: 0;
        }
    </style>
</head>
<body>
<div id="htmlElement" class="yo hey cool"
     style="width: 40px; height: 30px; padding-top: 2px; padding-left: 2px; border-left: 1px solid black;">
    <span style="display:none;" id="someSpan">
        42
    </span>
    Yo
</div>
<svg width="400" height="110">
    <rect class="svg1 svg2" id="svgElement" width="300px" height="100px" style="fill:rgb(0,0,255); stroke-width:0;">
        Hey
    </rect>
</svg>
<form>
    <input id="textInput" type="text">
    <input id="checkInput" type="checkbox">
    <select id="selectInput">
        <option id="option1">O1</option>
        <option id="option2">O2</option>
    </select>
</form>
<div id="htmlElementWithInnerText">Hey<br>yo test
    <script>42</script>
    test
    <script>'hey hey';</script>
    <style>.someClass {
    }</style>
</div>

<input type="button" id="createElement">
<input type="button" id="makeVisible">
<div id="invisibleElement" style="display: none; width:500px; height: 500px;"></div>

<input type="button" id="newPage">

<script>
    document.querySelector('#createElement').addEventListener('click', function () {
        var div = document.createElement('div');

        div.id = 'newElement';

        window.setTimeout(function () {
            document.body.appendChild(div);
        }, 500);
    });

    document.querySelector('#makeVisible').addEventListener('click', function () {
        var div = document.querySelector('#invisibleElement');

        window.setTimeout(function () {
            div.style.display = 'block';
        }, 500);
    });

    document.querySelector('#newPage').addEventListener('click', function () {
        window.setTimeout(function () {
            document.location = 'http://localhost:3000/fixtures/api/es-next/selector/pages/new-page-element.html';
        }, 1000);
    });

    document.addEventListener("DOMContentLoaded", function () {
        window.setTimeout(function () {
            var div = document.createElement('div');

            div.id            = 'slowElement';
            div.style.display = 'none';
            div.style.width   = '500px';
            div.style.height  = '500px';

            window.setTimeout(function () {
                div.style.display = 'block';
            }, 100);
        }, 2000);
    });
</script>

<section id="container">
<div id="el1" class="idxEl">This is <script>var yo = 4;</script>element 1.</div>
<div id="el2" class="idxEl">Hey?! (yo)</div>
<div id="el3" class="idxEl">Hey?! (yo)</div>
<div id="el4" class="idxEl">This <script>var yo = 3;</script>is element 4.</div>
</section>
<a><b><c></c></b><d>e</d><f><g>h</g></f></a>
</body>

<div id="p2" class="parent2">
    <div id="p1" class="parent1">
        <div id="p0" class="parent0">
            <div id="childDiv"></div>
        </div>
    </div>
    Hey
</div>
<ul id="list">
    <li>
        <label id="write">Write code</label>
    </li>
    <li>
        <label id="test">Test it</label>
    </li>
    <li>
        <label id="release">Release it</label>
    </li>
</ul>
<div class="class1">
    <div id="common1" class="common"></div>
</div>
<div>
    <div id="common2" class="common class1"></div>
</div>
</html>
